<template>
	<view class="ynq-Location">
		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l, i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{ l }}</view>
		</view>

		<view class="ynq-AutoLocation flex">
			<view class="ynq-AutoAddress">
				<text class="ynq ynq-dizhi"></text>
				<text>当前定位：</text>
				<text>{{ CityName }}</text>
			</view>

			<view class="ynq-ReLocation">
				<text class="ynq ynq-ditudingwei"></text>
				<text>重新定位</text>
			</view>
		</view>

		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<view class="ynq-HotCity" id="ScrollTop">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>

				<view class="ynq-HotCityList flex">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item, index) in HotCity" :key="index">{{ item }}</text>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item, index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{ item.initial }}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city, name_index) in item.list" :key="name_index">{{ item_city.name }}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import cityData from '../../network/city.js'
export default {
	data() {
		return {
			CityName: '浙江',
			HotCity: ['北京', '深圳', '上海', '成都', '广州', '金华'],
			LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			CityList: cityData.city, //引用json数据
			LetterId: ''
		}
	},
	methods: {
		//获取定位点
		getLetter(name) {
			this.LetterId = name
			uni.pageScrollTo({
				selector: '#' + name,
				duration: 300
			})
		},
		//存储城市缓存
		getStorage(Name) {
			uni.setStorage({
				key: 'City_Name',
				data: Name
			})
			this.CityName = Name
			//跳转返回
			uni.navigateBack({
				url: '/pages/index/index'
			})
		}
	},
	onShow() {
		let _that = this
		setTimeout(function() {
			uni.getStorage({
				key: 'City_Name',
				success(res) {
					_that.CityName = res.data
				}
			})
		}, 1000)
	},
	onLoad() {}
}
</script>

<style lang="scss" scoped>
.ynq-Location {
	height: 100vh;
}
.ynq-AutoLocation {
	width: calc(100% - 40rpx);
	background: rgba(250, 250, 250, 0.5);
	padding: 20rpx 20rpx;
	text.ynq {
		font-size: 32rpx;
		margin-right: 10rpx;
	}
	text {
		font-size: 30rpx;
	}
}

.ynq-HotCity {
	padding: 20rpx;
}
.ynq-HotCityTitle {
	padding: 0rpx 0rpx;
	text.ynq {
		margin-right: 10rpx;
		color: #ff0000;
		font-size: 32rpx;
	}
	text {
		font-size: 30rpx;
	}
}
.ynq-HotCityList {
	padding: 20rpx 20rpx 20rpx 0;
	flex-wrap: wrap !important;
	text {
		width: 32%;
		display: inline-block;
		text-align: center;
		background: rgba(200, 200, 200, 0.2);
		margin-bottom: 10rpx;
		font-size: 26rpx;
		padding: 20rpx 0;
	}
}

.ynq-Letter {
	position: fixed;
	right: 5rpx;
	top: 180rpx;
	width: 30rpx;
	z-index: 100;
	view {
		display: block;
		width: 30rpx;
		text-align: center;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 22rpx;
		transition: ease 0.3s;
		-webkit-transition: ease 0.3s;
	}
}

.ynq-CityList {
	padding: 0px 40rpx 0 20rpx;
	.ynq-CityLetter {
		line-height: 30rpx;
		height: 40rpx;
		font-size: 24rpx;
		border-bottom: 1px solid #f7f7f7;
		padding-left: 10rpx;
		color: #909090;
	}
	.ynq-CityLine {
		margin: 20rpx 0px;
		text {
			display: block;
			line-height: 60rpx;
			padding: 0px 10rpx;
			font-size: 30rpx;
			color: #767676;
			&:nth-child(even) {
				background-color: rgba(200, 200, 200, 0.12);
			}
		}
	}
}
.ynq-ScrollView {
	height: calc(100vh - 160rpx);
}
.Click-Latter {
	font-size: 30rpx !important;
}
</style>
